
const { defineConfig } = require('@vue/cli-service')
const path = require('path') // 这个是需要的

const is_production = process.env.NODE_ENV == 'bformal' || process.env.NODE_ENV == 'btest' || process.env.NODE_ENV == 'blocal';
//css js 插入到 head cdn
const cdn = {
    css: [
        'https://unpkg.com/element-plus@2.2.32/theme-chalk/index.css',
        'https://fastly.jsdelivr.net/npm/vant@4.0.1/lib/index.css',
        'https://unpkg.com/qiaonan@1.0.7/css/style.css'
    ],
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/3.2.13/vue.global.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.3/vue-router.global.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js',
        'https://unpkg.com/element-plus@2.2.32/dist/index.full.js',
        'https://unpkg.com/@element-plus/icons-vue@2.0.10/dist/index.iife.min.js',
        'https://fastly.jsdelivr.net/npm/vant@4.0.1/lib/vant.min.js',
       
    ]
}
//  js 插入到 body cdn
const cdn_body = {
    js:[
         'https://unpkg.com/qiaonan@1.0.7/index.js'
    ]
}
//配置打包时使用CDN节点（加入externals外部扩展）， 忽略打包的第三方库
//左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
const externals = {
    // 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT、echarts，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错，若有异议可留言）
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-plus': 'ElementPlus',
    'vant': "vant",
    '@element-plus/icons-vue': 'ElementPlusIconsVue',
    'qiaonan':"UI"
}
module.exports = defineConfig({
    productionSourceMap: true,//去除vue打包后js目录下生成的.map文件，用于加速生产环境构建
    publicPath: '/', //公共路径
    // 打包分离出css文件夹
    lintOnSave: false,
    outputDir:'chat_dist',//输出目录
    // assetsDir:"assets",//静态文件目录 、css
    pluginOptions: {
        // 添加下面这段。src/style/public.less为存放变量的路径＋文件
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "src/assets/css/public.less")]
        }
    },

    // 开发环境分离了 不能热更新页面，开发禁止分离css
    css: is_production ? {
        extract: {
            linkType: true, // 5.x 用linkType,4.x用 Type
        }
    } : {},
    chainWebpack: config => {
        // 设置title
        config.plugin('html')
            .tap(args => {
                args[0].title = 'chat';
                return args;
            })
        // 生产环境用 cdn、图片打包优化
        if (is_production) {
            // 图片打包优化
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({
                    bypassOnDebug: true
                })

            config.plugin('html').tap(args => {
                args[0].cdn = cdn;
                args[0].cdn_body = cdn_body;
                return args
            })
            //视为一个外部库，而不将它打包进来
            config.externals(externals)
        } else {
            // 开发环境引入css
            config.plugin('html').tap(args => {
                args[0].cdn = {
                    css: cdn.css
                }
                return args
            })
        }
        config.output.filename('js/[name].[hash:8].js');//runtime.js
        config.output.chunkFilename('js/[name].[chunkhash:8].js'); //chunks
    },
    runtimeCompiler: true,//运行时Vue.extend template
    configureWebpack: config => {
        return {
            plugins: [

            ],

            // 分开 第三方js库 打包优化
            // 看这里：把chunk-vendors.js进行分包，提升资源加载速度，很有必要
            optimization: {
                nodeEnv: false,     
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
                    maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
                    minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
                    maxSize: 40000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
                    cacheGroups: {
                        vendors: {
                            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
                            name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下 vue-cli 4.x版本, 5.x版本直接写常量字符串
                                // const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                return `npm__`
                            },
                        },
                    },
                }
            }
        }
    },
    devServer: {
        open: false,//启动项目自动打开默认浏览器
        port: 8081,
        // proxy: {
        //     // 开发环境
        //     '/api': {
        //         // target: 'http://10.26.4.113:8039',
        //         target: process.env.VUE_APP_URL,
        //         changeOrigin: true,
        //         secure: false,
        //     },
        //     // 开发环境,解决富文本编辑器返回的图片为相对路径地址不显示
        //     '/uploads': {
        //         // target: 'http://10.26.4.113:8039',
        //         target: process.env.VUE_APP_URL,
        //         changeOrigin: true,
        //         secure: false,
        //     },
        // },
        /**
         *   devServer: {
        port: 8124,
        open: false,
        proxy: {
            '/api': {
                target: "https://qiaonan.info:8123",
                pathRewrite: {
                    '^/api': ""
                }
            }
        }
    }
         */
    },
})

